<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>商城首页</title>
	<link rel="stylesheet" type="text/css" href="json/css/iscorlstyle.css">
	<link rel="stylesheet" type="text/css" href="Swiper-3.4.2/dist/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/aui/aui-slide.css" />
	<link rel="stylesheet" type="text/css" href="css/aui/index.css" />
	<script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/aui/aui-tab.js" ></script>
	
	</head>
	<body style="font-family:'黑体'">
			<!-- --下拉刷新-- -->
		<div id="wrapper">
		<div class="scroller">
			<div id="less" class="lesshide"><i class="pull_icons"></i><span>下拉刷新!...</span></div>
			<!-- ---搜索--- -->
			<script src="js/aui/jquery-2.1.4.min.js"></script>
							<script src="js/aui/autosearch.js"></script>
							<div class="aui-searchbar" id="search">
								<div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()" >
									<i class="aui-iconfont aui-icon-search"></i>
									<form action="javascript:search();">
										<input type="search" placeholder="请输入搜索内容" id="search-input" AUTOCOMPLETE="off">
									</form>
								</div>
							</div>
							<script>
                                var input = $('#search-input');
                                var autosearch = new AutoSearch();
                                autosearch.init({input:input ,autoShow:false,data:function(callback){
                                    $.get('data.txt',{key:input.val()},function(result){
                                        callback(result);
                                    },'json');
                                }
                                });
							</script>
							<script>
                                $(document).keydown(function(e) {
                                    // 回车键事件
                                    if(e.which == 13) {
                                        jQuery(".confirmButton").click();
                                        self.location='classify1.html';
//			alert(123);
                                    }
                                });
							</script>

	      	<!-- --轮播-- -->
			<div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
		            	<a href="#">
			            	<img src="img/tu1.png" class="img-responsive"/>
			            </a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="#">
			            	<img src="img/tu2.png" class="img-responsive"/>
			            </a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="#">
			            	<img src="img/tu3.png" class="img-responsive"/>
			            </a>
		            </div>
		        </div>
		    </div>
		    <script src="Swiper-3.4.2/dist/js/swiper.min.js"></script>
		    <script>
		    var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        nextButton: '.swiper-button-next',
		        prevButton: '.swiper-button-prev',
		        paginationClickable: true,
		        spaceBetween: 30,
		        centeredSlides: true,
		        autoplay: 2500,
		        loop:true,
		        autoplayDisableOnInteraction: false
		    });
		    </script>

			<!-- --分类-- -->
			<div class="aui-row-padded fenlei">
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei1.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei2.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei3.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei4.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei5.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei6.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei7.jpg">
					</a>
				</div>
				<div class="aui-col-xs-3">
					<a href="#">
						<img src="img/fenlei8.jpg">
					</a>
				</div>
			</div>

			<!-- --热销-- -->
			<div class="aui-row-padded rexiao">
				<div class="aui-col-xs-6" style="position:relative;">
					<a href="#">
						<img src="img/jx1.jpg">
						<div style="position:absolute;width:21%;height:35%;padding-top:2%;border-radius:50%;border:1px solid red;top:54%;left:34%;font-size:0.6%;text-align:center;">
						</div>
					</a>
				</div>
				<div class="aui-col-xs-6">
					<a href="#">
						<img src="img/jx2.jpg">
					</a>
				</div>
				<div class="aui-col-xs-6">
					<a href="#">
						<img src="img/jx3.jpg">
					</a>
				</div>
				<div class="aui-col-xs-6">
					<a href="#">
						<img src="img/jx4.jpg">
					</a>
				</div>
				<div class="aui-col-xs-4">
					<a href="#">
						<img src="img/jx5.jpg">
					</a>
				</div>
				<div class="aui-col-xs-4">
					<a href="#">
						<img src="img/jx6.jpg">
					</a>
				</div>
				<div class="aui-col-xs-4">
					<a href="#">
						<img src="img/jx7.jpg">
					</a>
				</div>
				<div class="aui-col-xs-12">
					<a href="javascript:">
						<img src="img/jx8.jpg">
					</a>
				</div>
			</div>
			<!-- --商品列表-- -->
			<div class="aui-row sp">
				<ul id="rulee">
					<li class="aui-col-xs-6" style="border:1px solid #eee;">
						<a href="#">
							<img src="img/r1.jpg">
							<dl>
								<dt>阿斯蒂芬加水电费</dt>
								<dd>￥<em>333</em></dd>
							</dl>
						</a>
					</li>
					<li class="aui-col-xs-6" style="border:1px solid #eee;">
						<a href="#">
							<img src="img/r1.jpg">
							<dl>
								<dt>阿斯蒂芬加水电费</dt>
								<dd>￥<em>333</em></dd>
							</dl>
						</a>
					</li>
				</ul>
			</div>
			<div id= "more" class="more"><i class="pull_icon"></i><span>上拉加载...</span></div>
		</div>
		</div>
			<!-- --底部-- -->
		    <footer class="aui-bar aui-bar-tab" id="footer">
		        <div class="aui-bar-tab-item aui-active" tapmode>
		        	<a href="index.html" style="color:#039be5;">
			            <i class="aui-iconfont aui-icon-home"></i>
			            <div class="aui-bar-tab-label">
			            	首页
			            </div>
		            </a>
		        </div>
		        <div class="aui-bar-tab-item" tapmode>
		            <a href="classify.html">
			            <i class="aui-iconfont aui-icon-star"></i>
			            <div class="aui-bar-tab-label">
			            	分类
			            </div>
		            </a>
		        </div>
		        <div class="aui-bar-tab-item" tapmode>
		            <a href="carts.html">
			            <i class="aui-iconfont aui-icon-cart"></i>
			            <div class="aui-bar-tab-label">
			            	购物车
			            </div>
		            </a>
		        </div>
		        <div class="aui-bar-tab-item" tapmode>
		            <a href="person.html">
			            <i class="aui-iconfont aui-icon-my"></i>
			            <div class="aui-bar-tab-label">
			            	我的
			            </div>
		            </a>
		        </div>
		    </footer>
		    
	</body>
<script type="text/javascript" src="json/js/iscroll.js"></script>
	<script type="text/javascript">
	
	$(function(){
		$.ajax({
			url:'json/ay3.json',
			type:'get',
			dataType:'json',
			success:function(data){
				for (var i = 0; i < 6; i++) {
					$('.scroller ul').append('<div style="border-top:1px solid #E4E4E4;">'+data+'</div>');
				}
				ceshiHi();
			},
			error:function(){
				console.log('error');
				ceshiHi();
			},
		});
	});
	
	var ceshiHi=function(){
		var windowHi=$(window).height(); 
			var liHi=$("#rulee").height();
			// alert(liHi);
			if (liHi<windowHi) {
				
				var tianHi=windowHi-liHi+10;
				$("#tianchong").css("height",tianHi);
			} else{
				
				$("#tianchong").css("height","10px");
			};
	};
		ceshiHi();
		
		
		var scrollTimes=2;
		var allItems=50;
		var eachPage=10;
		var nowScrollTimes=scrollTimes++;
		var saftTime=Math.ceil(allItems/eachPage);
		
		
		var myscroll = new iScroll("wrapper",{
			onScrollMove:function(){
				if (this.y<(this.maxScrollY)) {
					$('.pull_icon').addClass('flip');
					$('.pull_icon').removeClass('loading');
					$('#more span').text('释放加载...');
				} else if(this.y > 0){
					$('#less').removeClass('lesshide');
					$('#less').addClass('lesshides');
					$('.pull_icons').addClass('flip');
					$('.pull_icons').removeClass('loading');
					$('#less span').text('释放刷新...');
				} else{
					$('.pull_icon').removeClass('flip loading');
					$('#more span').text('上拉加载...')
					$('#less').removeClass('lesshide');
					$('#less').addClass('lesshides');
					$('.pull_icons').removeClass('flip loading');
					$('#less span').text('下拉刷新...')
				}
			},
			onScrollEnd:function(){
				
				if ($('.pull_icon').hasClass('flip')) {
					$('.pull_icon').addClass('loading');
					$('#more span').text('加载中...');
					
					if (nowScrollTimes <= saftTime) {
						pullUpAction();
						nowScrollTimes+=1;
						//alert(nowScrollTimes);
					    //alert(saftTime);
						
					}else {
						//alert(nowScrollTimes);
					    //alert(saftTime);
						alert("已经到头了");
						$('.pull_icon').removeClass('flip loading');
						$('#more span').text('全部内容加载完毕');
					};
					
				} else if ($('.pull_icons').hasClass('flip')) {
					$('#less').removeClass('lesshide');
					$('#less').addClass('lesshides');
					$('.pull_icons').addClass('loading');
					$('#less span').text('刷新中...');
					pullDownAction();
					
				}
			},
			onRefresh:function(){
				$('.pull_icon').removeClass('flip loading');
				$('#more span').text('上拉加载...');
				/*$('#less').addClass('lesshide');
				$("#less").removeClass('biaoqian');*/
				$('.pull_icons').removeClass('flip');
				$('#less').removeClass('lesshides');
				$('#less').addClass('lesshide');
				//$('#less span').text('下拉刷新##...');
			}
			
		});


		function pullDownAction(){
			setTimeout(function(){
				//alert("下拉刷新页面功能启动，页面即将刷新...");
				window.location.reload();
				myscroll.refresh();
			}, 1000)
		};


		function pullUpAction(){
			setTimeout(function(){
				$.ajax({
					url:'json/ay3.json',
					type:'get',
					dataType:'json',
					success:function(data){
						for (var i = 0; i < 6; i++) {
							$('.scroller ul').append('<div style="border-top:1px solid #E4E4E4;">'+data+'</div>');
						}
						myscroll.refresh();
					},
					error:function(){
						console.log('error');
					},
				})
			}, 1000)
		}
		if ($('.scroller').height()<$('#wrapper').height()) {
			$('#more').hide();
			myscroll.destroy();
		}
		
		$(function(){
			$("#less").addClass("lesshide");
		});
		
	</script>
</html>